<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户注册 - 物流订单跟踪系统</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入主题CSS -->
    <link rel="stylesheet" href="/css/theme.css">
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background-color: var(--bg-color);
        }
        .registration-form {
            width: 100%;
            max-width: 420px;
            padding: 30px;
            margin: auto;
            background-color: var(--card-bg);
            border-radius: var(--border-radius-lg);
            box-shadow: var(--box-shadow);
            animation: fadeIn var(--transition-speed);
        }
    </style>
</head>
<body>
<div class="registration-form">
    <form id="registerForm">
        <h2 class="mb-4 text-center">用户注册</h2>

        <div id="messageArea" class="mb-3"></div> <!-- 用于显示成功或错误消息 -->

        <div class="form-floating mb-3">
            <input type="text" class="form-control" id="username" placeholder="用户名" required minlength="3" maxlength="50">
            <label for="username">用户名</label>
        </div>

        <div class="form-floating mb-3">
            <input type="password" class="form-control" id="password" placeholder="密码" required minlength="6" maxlength="100">
            <label for="password">密码</label>
        </div>

        <div class="form-floating mb-3">
            <input type="password" class="form-control" id="confirmPassword" placeholder="确认密码" required>
            <label for="confirmPassword">确认密码</label>
        </div>

        <!-- 添加角色选择 -->
        <div class="mb-3">
            <label class="form-label">注册为：</label>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="role" id="roleUser" value="user" checked>
                <label class="form-check-label" for="roleUser">
                    普通用户
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="role" id="roleDelivery" value="delivery_person">
                <label class="form-check-label" for="roleDelivery">
                    配送员
                </label>
            </div>
        </div>

        <!-- 如果需要邮箱
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="email" placeholder="name@example.com">
            <label for="email">邮箱 (可选)</label>
        </div>
        -->

        <button class="w-100 btn btn-lg btn-primary" type="submit">注册</button>

        <p class="mt-3 mb-1 text-center">
            已经有账户了? <a href="/login.html">立即登录</a>
        </p>
        <p class="mt-3 text-center text-muted">©物流订单跟踪系统</p>
    </form>
</div>

<!-- 引入 Bootstrap JS (可选，如果用到JS组件) 和你自己的JS文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/register.js"></script> <!-- 我们将在这个文件中编写注册逻辑 -->
</body>
</html>